<template>
  <a-tooltip
    v-if="isShowTooltip"
    placement="top"
    :overlayStyle="{
      maxWidth: tooltipMaxWidth
    }"
  >
    <template #title>
      <div v-if="!useHtml">{{ title }}</div>
      <div class="global-tooltip-show" v-else v-html="title"></div>
    </template>
    <p class="ellipsis-tooltip" :style="{ width: width + 'px' }" @mouseenter="visibilityChange($event)">
      <slot></slot>
    </p>
  </a-tooltip>
  <p class="ellipsis-tooltip" :style="{ width: width + 'px' }" v-else @mouseenter="visibilityChange($event)">
    <slot></slot>
  </p>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps({
  title: { type: String },
  width: { type: Number },
  useHtml: { type: Boolean, default: false },
  tooltipMaxWidth: { type: String, default: '450px' }
})
const isShowTooltip = ref(false)

const visibilityChange = (event: any) => {
  const ev = event.target
  const ev_weight = ev.scrollWidth // 文本的实际宽度   scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
  const content_weight = ev.clientWidth // 文本的可视宽度 clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
  if (ev_weight > content_weight) {
    // 实际宽度 > 可视宽度  文字溢出
    isShowTooltip.value = true
  } else {
    // 否则为不溢出
    isShowTooltip.value = false
  }
}
</script>

<style lang="less" scoped>
.ellipsis-tooltip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
</style>
